<template>
  <div class="signature-container">
    <canvas
      ref="canvas"
      @touchstart.prevent="handleStart"
      @touchmove.prevent="handleMove"
      @touchend="handleEnd"
      @mousedown="handleStart"
      @mousemove="handleMove"
      @mouseup="handleEnd"
      @mouseleave="handleEnd"
    ></canvas>
    <div class="buttons">
      <button class="clear" @click="clear">重签</button>
      <button class="save" @click="save">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ctx: null,
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      logicWidth: 0,
      logicHeight: 0,
    };
  },
  mounted() {
    this.initCanvas();
  },
  methods: {
    initCanvas() {
      const canvas = this.$refs.canvas;
      const rect = canvas.getBoundingClientRect();
      const dpr = window.devicePixelRatio || 1;
      
      this.logicWidth = rect.width;
      this.logicHeight = rect.height;
      
      canvas.width = this.logicWidth * dpr;
      canvas.height = this.logicHeight * dpr;
      
      this.ctx = canvas.getContext('2d');
      this.ctx.scale(dpr, dpr);
      
      // 设置初始背景为白色
      this.ctx.fillStyle = '#F2F4F5';
      this.ctx.fillRect(0, 0, this.logicWidth, this.logicHeight);
      
      // 设置绘图样式
      this.ctx.strokeStyle = '#000000';
      this.ctx.lineWidth = 2;
      this.ctx.lineCap = 'round';
      this.ctx.lineJoin = 'round';
    },
    getEventPosition(event) {
      const canvas = this.$refs.canvas;
      const rect = canvas.getBoundingClientRect();
      let clientX, clientY;
      
      if (event.touches) {
        clientX = event.touches[0].clientX;
        clientY = event.touches[0].clientY;
      } else {
        clientX = event.clientX;
        clientY = event.clientY;
      }
      
      return {
        offsetX: clientX - rect.left,
        offsetY: clientY - rect.top,
      };
    },
    handleStart(event) {
      const { offsetX, offsetY } = this.getEventPosition(event);
      this.isDrawing = true;
      this.lastX = offsetX;
      this.lastY = offsetY;
      this.ctx.beginPath();
      this.ctx.moveTo(offsetX, offsetY);
    },
    handleMove(event) {
      if (!this.isDrawing) return;
      const { offsetX, offsetY } = this.getEventPosition(event);
      
      this.ctx.lineTo(offsetX, offsetY);
      this.ctx.stroke();
      this.lastX = offsetX;
      this.lastY = offsetY;
    },
    handleEnd() {
      this.isDrawing = false;
    },
    clear() {
      // 清除画布并重置白色背景
      this.ctx.fillStyle = '#F2F4F5';
      this.ctx.fillRect(0, 0, this.logicWidth, this.logicHeight);
      this.$emit('close');
    },
    save() {
      const canvas = this.$refs.canvas;
      // 导出PNG格式图片
      const image = canvas.toDataURL('image/png');
      this.$emit('save', image);
    },
  },
};
</script>

<style scoped>
.signature-container {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  padding-top: .4rem;
}
canvas {
  width: 100%;
  height: 200px;
  /* border: 1px solid #cccccc; */
  background: #F2F4F5;
  touch-action: none; /* 防止触摸时页面滚动 */
}
.buttons {
  margin-top: 10px;
  display: flex;
  justify-content: space-around;
}

button {
  width: 45%;
  padding: 10px 0;
  /* padding: 5px 40px; */
  border: none;
  border-radius: 100px;
  /* background-color: #f0f0f0; */
}
.clear{
  background: #fff;
  border: 1px solid #1D69E4;
  
  color: #1D69E4;
}
.save{
  background: linear-gradient( 270deg, #1261E2 0%, #4A89EC 100%);
  color: #fff;
}
button:active {
  background-color: #e0e0e0;
}
</style>